<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .header {
            text-align: center;
            padding: 30px 0;
            color: #333;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .header p {
            font-size: 1.1rem;
            color: #666;
        }

        .container {
            display: flex;
            gap: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .main-content {
            flex: 3;
        }

        .chat-container {
            flex: 1;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 20px;
            height: fit-content;
            transition: all 0.3s ease;
        }

        .toolbar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            padding: 20px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .toolbar:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        .search-box {
            display: flex;
            gap: 10px;
            flex: 1;
            max-width: 500px;
        }

        .search-box input {
            flex: 1;
            padding: 12px 20px;
            border: 2px solid #e1e1e1;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .search-box input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            outline: none;
        }

        .search-box button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .search-box button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .add-course-btn {
            background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .add-course-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
        }

        .table-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .table-container:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 18px 15px;
            text-align: left;
            font-weight: 600;
        }

        td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f0f4ff;
        }

        .action-cell {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            padding: 8px 15px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .edit-btn {
            background-color: #2196F3;
            color: white;
        }

        .edit-btn:hover {
            background-color: #0b7dda;
            transform: translateY(-2px);
        }

        .delete-btn {
            background-color: #f44336;
            color: white;
        }

        .delete-btn:hover {
            background-color: #d32f2f;
            transform: translateY(-2px);
        }

        .chat-header {
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.2rem;
        }

        .toggle-chat {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #666;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .toggle-chat:hover {
            background-color: #f0f0f0;
        }

        .chat-messages {
            height: 350px;
            overflow-y: auto;
            border: 1px solid #eee;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 10px;
            background-color: #fafafa;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .message {
            padding: 12px 15px;
            border-radius: 10px;
            max-width: 80%;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .user-message {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 0;
        }

        .bot-message {
            background-color: #e3e6eb;
            color: #333;
            align-self: flex-start;
            border-bottom-left-radius: 0;
        }

        .chat-input {
            display: flex;
            gap: 10px;
        }

        .chat-input input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid #e1e1e1;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .chat-input input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            outline: none;
        }

        .chat-input button {
            background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .chat-input button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
        }

        .chat-toggle-icon {
            position: fixed;
            right: 25px;
            bottom: 25px;
            width: 65px;
            height: 65px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            cursor: pointer;
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
            z-index: 1000;
            transition: all 0.3s ease;
        }

        .chat-toggle-icon:hover {
            transform: scale(1.1);
        }

        .no-data {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .no-data i {
            font-size: 3rem;
            margin-bottom: 15px;
            color: #ccc;
        }

        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
            
            .chat-container {
                order: -1;
            }
        }

        @media (max-width: 768px) {
            .toolbar {
                flex-direction: column;
                gap: 15px;
            }
            
            .search-box {
                max-width: 100%;
            }
            
            .header h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-book"></i> 课程管理系统</h1>
        <p>哈尔滨信息工程学院 - 现代化教学管理平台</p>
    </div>

    <div class="container">
        <div class="main-content">
            <div class="toolbar">
                <div class="search-box">
                    <input type="text" id="searchInput" placeholder="搜索课程名称...">
                    <button onclick="searchCourse()">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                </div>
                <button class="add-course-btn" onclick="addCourse()">
                    <i class="fas fa-plus-circle"></i> 新增课程
                </button>
            </div>

            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th width="8%">编号</th>
                            <th width="25%">课程名称</th>
                            <th width="35%">简介</th>
                            <th width="17%">教师</th>
                            <th width="15%">操作</th>
                        </tr>
                    </thead>
                    <tbody id="tb">
                        <!-- 数据将通过 AJAX 加载 -->
                    </tbody>
                </table>
            </div>
        </div>

        <div class="chat-container" id="chatContainer">
            <div class="chat-header">
                <span><i class="fas fa-robot"></i> 智能助手</span>
                <button class="toggle-chat" onclick="toggleChat()">−</button>
            </div>
            <div class="chat-messages" id="chatMessages">
                <div class="message bot-message">
                    <i class="fas fa-robot"></i> 您好！我是您的智能助手，可以帮您管理课程信息。您可以问我：
                    <br><br>
                    • 如何添加新课程？
                    <br>
                    • 如何删除课程？
                    <br>
                    • 如何查找特定教师的课程？
                </div>
            </div>
            <div class="chat-input">
                <input type="text" id="messageInput" placeholder="输入您的问题...">
                <button onclick="sendMessage()">
                    <i class="fas fa-paper-plane"></i> 发送
                </button>
            </div>
        </div>
    </div>

    <div class="chat-toggle-icon" id="chatToggleIcon" onclick="toggleChatIcon()" style="display: none;">
        <i class="fas fa-comments"></i>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script>
        $(function (){
            showCourse();
        });

        function showCourse(){
            $.ajax({
                url:"/course/query",
                method:'get',
                dataType:'json',
                success:function (res){
                    $("#tb").empty();
                    if(res.length === 0) {
                        $("#tb").append('<tr><td colspan="5" class="no-data"><i class="fas fa-inbox"></i><br>暂无课程数据</td></tr>');
                        return;
                    }
                    var row ='';
                    $.each(res,function (i,v){
                        row = row + "<tr><td>"+v.id+"</td><td>"+v.cname+"</td><td>"+v.mark+"</td><td>"+v.tea+"</td><td class='action-cell'><button class='action-btn edit-btn' onclick='edit("+v.id+")'><i class='fas fa-edit'></i> 编辑</button><button class='action-btn delete-btn' onclick='del("+v.id+")'><i class='fas fa-trash'></i> 删除</button></td></tr>";
                    });
                    $("#tb").append(row);
                },
                error: function() {
                    $("#tb").empty().append('<tr><td colspan="5" class="no-data">数据加载失败，请刷新页面重试</td></tr>');
                }
            });
        }

        // 新增搜索功能
        function searchCourse() {
            var keyword = $("#searchInput").val().trim();
            if (keyword == "") {
                showCourse(); // 如果搜索关键词为空，显示所有课程
                return;
            }

            $.ajax({
                url: "/course/query",
                method: 'get',
                data: { cname: keyword },
                dataType: 'json',
                success: function(res) {
                    $("#tb").empty();
                    if(res.length === 0) {
                        $("#tb").append('<tr><td colspan="5" class="no-data"><i class="fas fa-search"></i><br>未找到相关课程</td></tr>');
                        return;
                    }
                    var row = '';
                    $.each(res, function(i, v) {
                        row = row + "<tr><td>"+v.id+"</td><td>"+v.cname+"</td><td>"+v.mark+"</td><td>"+v.tea+"</td><td class='action-cell'><button class='action-btn edit-btn' onclick='edit("+v.id+")'><i class='fas fa-edit'></i> 编辑</button><button class='action-btn delete-btn' onclick='del("+v.id+")'><i class='fas fa-trash'></i> 删除</button></td></tr>";
                    });
                    $("#tb").append(row);
                },
                error: function() {
                    $("#tb").empty().append('<tr><td colspan="5" class="no-data">搜索失败，请重试</td></tr>');
                }
            });
        }

        // 新增添加课程功能
        function addCourse() {
            window.location.href = "/course/add";
        }

        function sendMessage() {
            var input = document.getElementById('messageInput');
            var message = input.value.trim();

            if (message) {
                // 显示用户消息
                var chatMessages = document.getElementById('chatMessages');
                var userMessageDiv = document.createElement('div');
                userMessageDiv.className = 'message user-message';
                userMessageDiv.innerHTML = '<i class="fas fa-user"></i> ' + message;
                chatMessages.appendChild(userMessageDiv);
                
                // 发起sse: 服务端推送 Server-Sent Events
                var source = new EventSource('/ai/generateStreamAsString?message=' + encodeURIComponent(message));
                var botMessageDiv = null;
                
                source.onmessage = function(event) {
                    if (event.data === '[complete]') {
                        source.close();
                        // 每次对话完后刷新列表
                        showCourse();
                        return;
                    }
                    
                    // 如果还没有创建bot消息元素，则创建一个
                    if (!botMessageDiv) {
                        botMessageDiv = document.createElement('div');
                        botMessageDiv.className = 'message bot-message';
                        botMessageDiv.innerHTML = '<i class="fas fa-robot"></i> ';
                        chatMessages.appendChild(botMessageDiv);
                    }
                    
                    // 累积文本内容
                    botMessageDiv.innerHTML += event.data;
                    
                    // 滚动到底部
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                };
                
                // 清空输入框
                input.value = '';
                
                // 滚动到底部
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
        }

        // 回车发送消息
        document.getElementById('messageInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // 回车搜索课程
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchCourse();
            }
        });

        // 切换聊天窗口显示/隐藏
        function toggleChat() {
            var chatContainer = document.getElementById('chatContainer');
            var toggleButton = document.querySelector('.toggle-chat');
            var chatToggleIcon = document.getElementById('chatToggleIcon');

            if (chatContainer.style.display === 'none') {
                // 显示聊天窗口
                chatContainer.style.display = 'block';
                toggleButton.textContent = '−';
                chatToggleIcon.style.display = 'none';
            } else {
                // 隐藏聊天窗口
                chatContainer.style.display = 'none';
                chatToggleIcon.style.display = 'flex';
            }
        }

        // 点击图标显示聊天窗口
        function toggleChatIcon() {
            var chatContainer = document.getElementById('chatContainer');
            var chatToggleIcon = document.getElementById('chatToggleIcon');

            chatContainer.style.display = 'block';
            chatToggleIcon.style.display = 'none';
        }
        
        function del(id){
            if (confirm('确定要删除这门课程吗？此操作不可恢复！')) {
                $.ajax({
                    url:"/course/del",
                    method:'get',
                    data:{id:id},
                    dataType:'json',
                    success:function (res){
                        alert('课程删除成功！');
                        showCourse();
                    },
                    error: function() {
                        alert('删除失败，请重试');
                    }
                })
            }
        }
        
        function edit(id){
            window.location.href = "/course/edit?id="+id;
        }
    </script>
</body>
</html>